<template>
    <div class="wzbzdtj">
        <div class="zbcgjh-top">
            <el-form :model="form" ref="form" label-width="80px" :inline="true" size="normal">
                <el-form-item label="行政区划">
                    <el-cascader v-model="form.addvcd" :options="xzqhdata" :props="xzqhprop" ref="xzqh"
                        @change="xzqhorgChange" :clearable="true"></el-cascader>
                </el-form-item>
                <el-form-item label="测站编码">
                    <el-input v-model="form.stcd" placeholder="请输入测站编码"></el-input>
                </el-form-item>
                <el-form-item label="测站名称">
                    <el-input v-model="form.stnm" placeholder="请输入测站名称"></el-input>
                </el-form-item>
                <el-form-item label="测站类别">
                    <el-select v-model="form.sttp" placeholder="请选择">
                        <el-option v-for="item in czlx" :key="item.statusid" :label="item.statusname"
                            :value="item.statusid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="查询时间">
                    <!-- <el-date-picker v-model="tm" type="month" placeholder="选择月" value-format="yyyy-MM" format="yyyy-MM">
                    </el-date-picker> -->
                    <!-- <el-date-picker v-model="form.tm" type="daterange" range-separator="至" :start-placeholder="开始日期"
                        :end-placeholder="结束日期" :picker-options="pickerOptions" @change="changeTimer"
                        value-format="yyyy-MM-dd" format="yyyy-MM-dd">
                    </el-date-picker> -->
                    <el-date-picker v-model="form.tm" type="daterange" align="right" unlink-panels range-separator="至"
                        :start-placeholder="stm" :end-placeholder="etm" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div class="top-button">
                <el-button size="default" @click="chaxun"><i class="iconfont icon-sousuo"></i> 查 询</el-button>
                <el-button size="default" @click="chongzhi"><i class="el-icon-refresh"></i> 重 置</el-button>
                <el-dropdown size="small" placement="bottom" trigger="click" @command="batchOperate"
                    style="margin-left: 10px;">
                    <el-button class="search-btn" size="default">
                        <i class="el-icon-upload2"></i>
                        导 出
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="batch_remarks">导出列表</el-dropdown-item>
                        <el-dropdown-item command="export_excel">导出测站</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div class="zbcgjh-middle">
            <el-table class="tableBox" :data="tableData" stripe height="90%" @selection-change="handleSelectChange" border
                :row-class-name="tableRowClassName" :header-cell-style="{ background: '#b2dffe', color: '#000' }"
                style="width: 100%">
                <el-table-column type="selection" align="center" width="50">
                </el-table-column>
                <el-table-column type="index" label="序号" align="center" width="50" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div v-text="pageSize * (currentPage - 1) + 1 + scope.$index"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="stcd" label="监测站编码" width="120" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="stnm" label="监测站名称" width="160" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="addvnm" label="行政区划" width="160" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="stlc" label="监测站位置" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="lgtd" label="东经(度)" width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="lttd" label="北纬(度)" width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="sttp" label="监测站类别" width="150" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="tm" label="最新监测时间" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="操作" width="80" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <i class="iconfont icon-chakan" title="查 看" @click="chakan(scope.row, scope.$index)"></i>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 查看对话框 -->
        <el-dialog :visible.sync="dialogVisible" width="80%" :append-to-body="true">
            <div slot="title" class="dialog-title">
                <div class="button-right">
                    <span>{{ this.ckdhktitle }}监测站未整编数据统计</span>
                    <!-- <i class="el-icon-circle-close"></i>; -->
                </div>
            </div>
            <div class="center">
                <el-table class="tableBox" :data="tableData1" :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#b2dffe', color: '#000' }" stripe border style="width:100%">
                    <el-table-column prop="date" label="基本信息" width="180">
                        <el-table-column prop="stcd" label="测站编码" style="background-color: red" align="center" width="180">
                        </el-table-column>
                        <el-table-column prop="stnm" label="测站名称" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="addvnm" label="行政区划" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="stlc" label="监测站位置" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <el-table class="tableBox" :data="tableData2" stripe height="235" :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#b2dffe', color: '#000' }" border style="width: 100%">
                    <el-table-column prop="date" label="未整编数据信息" width="180">
                        <el-table-column label="序号" type="index" align="center" width="180">
                        </el-table-column>
                        <el-table-column prop="z" label="水位(m)" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="bd" label="埋深(m)" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="tm" label="监测时间" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="ckdhkdc"><i class="iconfont icon-xiazai-" title="下载"></i>&nbsp;下 载
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
// 列表、查询、重置、导出（一半）、查看对话框列表、查看对话框下载、行政区划、页码动态设置、时间段设置默认日期
import { zbcgwzbzdtj, zbcgwzbzddc, qylx, zbcgwzbzddhklist, zbcgwzbzddhkdc, xzqhlist } from '@/api/index'
import exprotFile from "@/utils/exportFile"
export default {
    data() {
        return {
            // 主页头部表单
            form: {
                addvcd: '220000',//行政区划
                stcd: '',//站点编码
                stnm: '',//站点名称
                tm: [],//查询时间,
                sttp: '',//测站类别
            },
            xzqhdata: [],//行政区划
            xzqhprop: {
                label: "addvnm",
                value: "addvcd",
                children: "addvcds",
                checkStrictly: true,
            },
            czlx: [],// 测站类型下拉框数组内容
            tableData: [],// 主页表格内容
            currentPage: 1,  //当前页码
            pageSize: 10,	//当前默认多少条
            total: 10,
            dialogVisible: false, // 查看对话框 
            tableData1: [],// 查看对话框基本信息数组
            tableData2: [],// 查看对话框未整编数据信息
            ckdhktitle: '',//查看对话框title
            stm: '',//开始时间
            etm: '',//结束时间
            multipleSelection: [],//获取的多组测站的数据
            id: '',//查看对话框导出的参数id
        }
    },
    mounted() {
        this.getriqi();//获取顶部的时间段js
        this.zbcgwzbzdtj();//获取表格数据
        this.qylxobj();//获取顶部测站类别的数据
        this.xzqhlist();//获取行政区划
    },
    methods: {
        // 获取顶部的时间段
        // getriqi() {
        //     var dqdate = new Date()
        //     var dqday = dqdate.getDate()
        //     var dqyear = dqdate.getFullYear()
        //     var dqmonth = dqdate.getMonth() + 1
        //     // console.log(dqyear, dqmonth, dqday)
        //     if (dqmonth < 10) {
        //         dqmonth = "0" + dqmonth
        //     }
        //     if (dqday < 10) {
        //         dqday = "0" + dqday
        //     }
        //     if (dqmonth == 0) {
        //         dqmonth = 12
        //         dqyear = dqyear - 1
        //     }
        //     if (dqday <= 15) {
        //         var cemon = dqmonth - 2
        //         if (cemon - 2 == 0) {
        //             var ceyea = dqyear
        //             // cemon = 12
        //             if (cemon == 11) {
        //                 cemon = 12
        //                 ceyea = dqyear - 1
        //             }
        //         }
        //         // console.log(dqyear)
        //         // console.log(ceyea);
        //         switch (cemon) {
        //             case 1:
        //                 this.form.tm = ceyea + "-0" + cemon + "-" + "01," + ceyea + "-0" + cemon + "-" + "31";
        //                 break;
        //             case 2:
        //                 this.form.tm = ceyea + "-0" + cemon + "-" + "01," + ceyea + "-0" + cemon + "-" + "28";
        //                 break;
        //             case 3:
        //                 this.form.tm = ceyea + "-0" + cemon + "-" + "01," + ceyea + "-0" + cemon + "-" + "31";
        //                 break;
        //             case 4:
        //                 this.form.tm = ceyea + "-0" + cemon + "-" + "01," + ceyea + "-0" + cemon + "-" + "30";
        //                 break;
        //             case 5:
        //                 this.form.tm = ceyea + "-0" + cemon + "-" + "01," + ceyea + "-0" + cemon + "-" + "31";
        //                 break;
        //             case 6:
        //                 this.form.tm = ceyea + "-0" + cemon + "-" + "01," + ceyea + "-0" + cemon + "-" + "30";
        //                 break;
        //             case 7:
        //                 this.form.tm = ceyea + "-0" + cemon + "-" + "01," + ceyea + "-0" + cemon + "-" + "31";
        //                 break;
        //             case 8:
        //                 this.form.tm = ceyea + "-0" + cemon + "-" + "01," + ceyea + "-0" + cemon + "-" + "31";
        //                 break;
        //             case 1:
        //                 this.form.tm = ceyea + "-0" + cemon + "-" + "01," + ceyea + "-0" + cemon + "-" + "31";
        //                 break;
        //             case 9:
        //                 this.form.tm = ceyea + "-0" + cemon + "-" + "01," + ceyea + "-0" + cemon + "-" + "30";
        //                 break;
        //             case 10:
        //                 this.form.tm = ceyea + "-" + cemon + "-" + "01," + ceyea + "-" + cemon + "-" + "31";
        //                 break;
        //             case 11:
        //                 this.form.tm = ceyea + "-" + cemon + "-" + "01," + ceyea + "-" + cemon + "-" + "30";
        //                 break;
        //             case 12:
        //                 this.form.tm = ceyea + "-" + cemon + "-" + "01," + ceyea + "-" + cemon + "-" + "31";
        //                 break;
        //         }
        //         // console.log(this.form.tm);
        //     } else if (dqday > 15) {
        //         // var dpmonth = dqmonth - 1
        //         this.form.tm = dqyear + "-" + dqmonth + "-" + "01," + dqyear + "-" + dqmonth + "-" + dqday
        //     }
        //     this.form.tm = dqyear + "-" + dqmonth + "-01 00:00:00" + dqyear + "-" + dqmonth + "-" + dqday + " 23:59:59"
        //     this.form.tm = this.form.tm.split(",")
        //     console.log(this.form.tm)
        //     this.stm = this.form.tm[0]
        //     this.etm = this.form.tm[1]
        // },
        getriqi() {
            let nowdays = new Date()
            var day = nowdays.getDate()
            let year = nowdays.getFullYear()
            let month = nowdays.getMonth()
            if (month < 10) {
                month = '0' + month
            }
            if (day <= 15) {
                month = month - 1
            }
            if (day >= 16) {
                month = month
            }
            if (month === 0) {
                month = 11
                year = year - 1
            }
            // // if (day <= 15) {
            // //     month = month - 2
            // // }
            // console.log(month);
            let yDate = new Date(year, month, 0)
            let startDareTime = year + '-' + month + '-01'
            let endDateTime = year + '-' + month + '-' + yDate.getDate() + ' '
            // console.log(startDareTime, endDateTime);
            this.form.tm[0] = startDareTime
            this.form.tm[1] = endDateTime
            this.stm = this.form.tm[0]
            this.etm = this.form.tm[1]
            // console.log(this.form.tm);
        },
        // 获取行政区划
        async xzqhlist() {
            const addvcd = '220000'
            const res = await xzqhlist(addvcd)
            // console.log(res.data.data);
            this.xzqhdata = res.data.data
        },
        // 获取区域类型数据
        async qylxobj() {
            // task_status
            // 获取状态数据
            const zt = 'sttp'
            const res4 = await qylx(zt)
            // console.log(res4);
            this.czlx = res4.data.data
            // console.log(this.czlx);
        },
        // 获取表格数据
        async zbcgwzbzdtj() {
            const wzbzdtjobj = {
                addvcd: '220000',//吉林省的编码
                addvcdArray: [],//行政区划数组
                etm: this.form.tm[1],//结束时间
                pageInfo: {
                    pageIndex: this.currentPage,//当前页码
                    pagesize: this.pageSize//每页多少条数据
                },
                stcd: this.form.stcd,//测站编码
                stcdArray: [],//所选测站的stcd所组成的数组，可以通过批量删除那个方法去获取数组的内容，并复制到这个stcdArray里面
                // 所选测站的stcd所组成的数组，可以通过批量删除那个方法去获取数组的内容，并复制到这个stcdArray里面
                stm: this.form.tm[0],//开始时间
                stnm: this.form.stnm,//测站名称
                sttp: this.form.sttp,//测站类别
            }
            // console.log(wzbzdtjobj);
            // 上面的wzbzdtjobj打印出来的数据是pagesize返回的是15
            const res = await zbcgwzbzdtj(JSON.stringify(wzbzdtjobj))
            // console.log(res);
            // res返回的pagesize是10条，这需要找雪娇调一下后台
            this.tableData = res.data.data.list
            this.total = res.data.data.total
        },
        //和分页相关的
        //pageSize发生变化时触发的事件，每页多少条数据
        handleSizeChange(val) {
            this.pageSize = val;
            // console.log(`每页 ${val} 条`);
            // val = 10
        },
        //当前页码currentPage发生变化时触发的事件，当前页码的切换
        handleCurrentChange(val) {
            this.currentPage = val
            const wzbzdtjobj = {
                addvcd: this.form.addvcd,//吉林省编码
                addvcdArray: [],//行政区划数组
                etm: this.form.tm[1],//结束时间
                pageInfo: {
                    pageIndex: this.currentPage,//当前页
                    pagesize: this.pageSize//每页条数
                },
                stcd: this.form.stcd,//测站编码
                stcdArray: [],//所选测站的stcd所组成的数组，可以通过批量删除那个方法去获取数组的内容，并复制到这个stcdArray里面
                stm: this.form.tm[0],//开始时间
                stnm: this.form.stnm,//测站名称
            }
            // console.log(wzbzdtjobj);
            zbcgwzbzdtj(JSON.stringify(wzbzdtjobj)).then(res => {
                this.tableData = res.data.data.list
                this.total = res.data.data.total
            })
            // this.zbcgwzbzdtj();
            // console.log(`当前页: ${val}`);
        },
        // 表格的隔行颜色改变
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
                return 'statistiss-row'
            } else {
                return ''
            }
        },
        // 查看对话框
        chakan(row, rowIndex) {
            // console.log(row);
            this.dialogVisible = true
            this.ckdhktitle = row.stnm
            let ckdataarr = [
                {
                    stcd: "",
                    sstnm: "",
                    addvnm: "",
                    stlc: "",
                }
            ]
            ckdataarr.map((item, index, arr) => {
                item.stcd = row.stcd
                item.stnm = row.stnm
                item.addvnm = row.addvnm
                item.stlc = row.stlc
            })
            // console.log(ckdataarr)
            this.tableData1 = ckdataarr
            // 对话框第二个表格的数据接口
            // console.log(row.stcd);
            const etm = this.form.tm[1]
            const stm = this.form.tm[0]
            zbcgwzbzddhklist(etm, row.stcd, stm).then(res => {
                // console.log(res);
                this.tableData2 = res.data.data
            })
            this.id = row.stcd
        },
        // 查看对话框导出(完成)
        ckdhkdc() {
            const etm = this.form.tm[1]
            const stm = this.form.tm[0]
            // this.dialogVisible = false
            zbcgwzbzddhkdc(etm, this.id, stm).then(res => {
                // console.log(res);
                exprotFile.getExcel(res.data, "未整编站点统计");
            })
        },
        // 重置
        chongzhi() {
            this.form.addvcd = '220000'
            this.form.stnm = ''
            this.form.stcd = ''
            // this.form.tm = ''//由于设置了时间段的默认值，所以，时间不能为空
            this.currentPage = 1
            this.pageSize = 10
            this.form.sttp = ''
            this.zbcgwzbzdtj();
        },
        // 查询
        chaxun() {
            const wzbzdtjobj = {
                addvcd: this.form.addvcd,//吉林省编码
                addvcdArray: [],//行政区划数组
                etm: this.form.tm[1],//结束时间
                pageInfo: {
                    pageIndex: this.currentPage,//当前页
                    pagesize: this.pageSize//每页条数
                },
                stcd: this.form.stcd,//测站编码
                stcdArray: [],//所选测站的stcd所组成的数组，可以通过批量删除那个方法去获取数组的内容，并复制到这个stcdArray里面
                stm: this.form.tm[0],//开始时间
                stnm: this.form.stnm,//测站名称
                sttp: this.form.sttp,//测站类别
            }
            // console.log(wzbzdtjobj);
            zbcgwzbzdtj(JSON.stringify(wzbzdtjobj)).then(res => {
                this.tableData = res.data.data.list
                this.total = res.data.data.total
            })
        },
        // 前端导出
        // tableToExcel() {
        //     // 要导出的json数据
        //     // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
        //     let str = `监测站编码,监测站名称,行政区划,监测站位置,东经(度),北纬(度),监测站类别,最新监测时间,\n`;
        //     // 增加\t为了不让表格显示科学计数法或者其他格式
        //     for (let i = 0; i < this.tableData.length; i++) {
        //         for (const key in this.tableData[i]) {
        //             str += `${this.tableData[i][key] + '\t'},`;
        //         }
        //         str += '\n';
        //     }
        //     // encodeURIComponent解决中文乱码
        //     const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        //     // 通过创建a标签实现
        //     const link = document.createElement("a");
        //     link.href = uri;
        //     下载的文件命名
        //     link.download = "json数据表.csv";
        //     link.click();
        // },
        // 下拉框自动关闭,选择后触发事件
        xzqhorgChange(val) {
            this.form.addvcd = val.slice(-1).toString();
            this.$refs.xzqh.dropDownVisible = false;
        },
        // 导出
        batchOperate(command) {
            switch (command) {
                case "batch_remarks":
                    this.dialogRemarks();
                    break;
                case "export_excel":
                    this.exportExcel();
                    break;
            }
        },
        // 获取多组测站数据
        handleSelectChange(val) {
            // console.log(val);
            this.multipleSelection = val
            // console.log(this.multipleSelection);
        },
        // 导出多选的测站
        exportExcel() {
            // console.log(111)
            let arr = []
            for (let i = 0; i < this.multipleSelection.length; i++) {
                arr.push(this.multipleSelection[i].stcd)
            }
            // 将数组内的值从小到大排序，
            arr.sort()
            let arr1 = arr.sort()
            const daochuobj = {
                addvcd: '220000',//吉林省编码
                etm: this.form.tm[1],//结束时间
                pageInfo: {
                    pageIndex: this.currentPage,//当前页
                    pageSize: this.pageSize//每页条数
                },
                stcd: this.form.stcd,//测站编码
                stcdArray: arr1,
                stm: this.form.tm[0],//开始时间
                stnm: this.form.stnm,//测站名称
                sttp: this.form.sttp,//测站类别
            }
            zbcgwzbzddc(JSON.stringify(daochuobj)).then(res => {
                // console.log(res);
                //利用封装的下载文件js
                exprotFile.getExcel(res.data, "多个未整编站点数据统计");
            })
        },
        // 导出列表
        dialogRemarks() {
            // console.log(222)
            const daochuobj = {
                addvcd: '220000',//吉林省编码
                etm: this.form.tm[1],//结束时间
                pageInfo: {
                    pageIndex: this.currentPage,//当前页
                    pageSize: this.pageSize//每页条数
                },
                stcd: this.form.stcd,//测站编码
                stm: this.form.tm[0],//开始时间
                stnm: this.form.stnm,//测站名称
                sttp: this.form.sttp,//测站类别
            }
            zbcgwzbzddc(JSON.stringify(daochuobj)).then(res => {
                // console.log(res);
                //利用封装的下载文件js，利用封装好的导出js，来下载表格数据
                exprotFile.getExcel(res.data, "未整编站点统计");
            })
        },
    },
}
</script>
<style lang="scss" scoped>
html,
body {
    height: 100%;
}

.wzbzdtj {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    ::v-deep .zbcgjh-top {
        width: 97%;
        height: 10%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        /* border: 1px solid red; */

        .el-form {
            /* width: 75%; */
            height: 100%;
            /* border: 1px solid red; */
            box-sizing: border-box;
            float: left;

            .el-form-item {
                padding-top: .625rem;
                padding-right: .625rem;

                .el-form-item__label {
                    background-color: #0055ab;
                    color: #fff;

                    .el-input {
                        width: 11rem;

                        .el-input__inner {
                            width: 100%;
                        }
                    }
                }

                .el-form-item__content {
                    line-height: 0;
                }
            }
        }

        .top-button {
            /* border: 1px solid red; */
            box-sizing: border-box;
            /* width: 25%; */
            height: 100%;
            padding-top: .625rem;
            box-sizing: border-box;
            float: right;

            .el-button {
                background-color: #0055ab;
                color: #fff;

                .iconfont {
                    font-size: .875rem;
                }
            }
        }
    }

    ::v-deep .zbcgjh-middle {
        width: 97%;
        height: 90%;
        margin: 0 auto;
        box-sizing: border-box;

        .el-table {
            width: 100%;
            height: 90%;
            background-color: rgb(243, 243, 243);
            padding-top: .625rem;

            .el-table__header-wrapper {}

            .el-table__body-wrapper {
                .el-icon-download:before {
                    font-size: 1rem;
                    cursor: pointer;
                }

                .iconfont {
                    cursor: pointer;
                }
            }
        }

        .bottom {
            width: 100%;
            height: 10%;

            .el-pagination {
                position: absolute;
                bottom: 3%;
                right: 6%;
            }
        }
    }

    @media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
        .zbcgjh-top {
            vertical-align: middle;
        }

        .zbcgjh-middle {
            vertical-align: middle;
        }
    }

}

/* 控制top表单的宽度 */
/deep/.zbcgjh-top .el-input {
    width: 5.6rem !important;

    .el-input__inner {
        width: 100%;
    }
}

// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: .375rem; // 横向滚动条
    height: .125rem; // 纵向滚动条 必写
}

// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: .1875rem;
}

/* 表格的行高 */
/deep/ .tableBox {
    th {
        padding: 0 !important;
        height: 3.125rem;
        line-height: 3.125rem;
    }

    td {
        padding: 0 !important;
        height: 2.5rem;
        line-height: 2.5rem;
    }
}


// 鼠标经过颜色
/deep/ .el-table__body tr:hover>td {
    background-color: #d9effe !important;
}

/* 列标题的字体颜色 */
/deep/ .el-table th.el-table__cell>.cell {
    color: #000;
}

/* 内容的字体颜色 */
/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
    color: #000;
}

/* 表格隔行改变的颜色 */
/deep/ .el-table__row.statistiss-row {
    background-color: #f2faff;
}

/* 去掉滚动条上方的小方块背景色 */
/deep/ .zbcgjh-middle .el-table--border th.el-table__cell.gutter:last-of-type {
    background: rgb(243, 243, 243);
    border: none;
}

/deep/ .el-range-editor.el-input__inner {
    width: 14.625rem !important;
}

/deep/ .el-table thead.is-group th.el-table__cell {
    background-color: #b2dffe;
}

/* 查看对话框 */
/deep/ .el-dialog {
    width: 80%;
    height: 72%;
    box-sizing: border-box;

    .el-dialog__header {
        height: 12%;
        box-sizing: border-box;

        /* 查看对话框标题的大小和颜色 */
        .dialog-title {
            height: 100%;
            box-sizing: border-box;

            .button-right {
                height: 100%;
                box-sizing: border-box;

                span {
                    font-size: 1.25rem;
                    color: #0055ab;
                }
            }
        }
    }

    .el-dialog__body {
        padding: 0 20px;
        margin-top: 10px;
        height: 73%;
        box-sizing: border-box;

        .center {
            height: 100%;
            box-sizing: border-box;

            /* .el-table {
                height: 80%;
                box-sizing: border-box;
            } */
        }
    }

    /* 查看对话框底部下载按钮 */
    .el-dialog__footer {
        width: 100%;
        height: 15%;
        text-align: center;
        box-sizing: border-box;

        .el-button {
            background-color: #0055ab;
            color: #fff;
        }
    }
}

/deep/ .el-dialog__header {
    padding-bottom: 1.25rem;
    background-color: #eee;
    height: 15%;
    box-sizing: border-box;
}
</style>